<template>
	<view class="recharge">
		<view class="tip">
			请您用刚刚填写姓名的微信、支付宝或网银转
			<text class="money">{{rechargeInfo.amount}}</text>元到以下账户！
		</view>
		<view class="bank">
			<view class="item">
				<view>
					<text class="title">银行名称</text>
					<text>{{bankinfo.bankname}}</text>
				</view>				
				<!--  #ifdef  APP-PLUS -->
				<text class="copy" @click="onCopy(bankinfo.bankname)">复制</text>				
				<!--  #endif -->
				<!--  #ifdef  H5 -->
				<text class="copy" v-clipboard:copy="bankinfo.bankname" v-clipboard:success="onCopyByH5">复制</text>
				<!--  #endif -->
			</view>
			<view class="item">
				<view>
					<text class="title">银行户名</text>
					<text>{{bankinfo.b_name}}</text>
				</view>
				<!--  #ifdef  APP-PLUS -->
				<text class="copy" @click="onCopy(bankinfo.b_name)">复制</text>
				<!--  #endif -->
				<!--  #ifdef  H5 -->
				<text class="copy" v-clipboard:copy="bankinfo.b_name" v-clipboard:success="onCopyByH5">复制</text>
				<!--  #endif -->
			</view>
			<view class="item">
				<view>
					<text class="title">银行卡号</text>
					<text>{{bankinfo.b_no}}</text>
				</view>					
				<!--  #ifdef  APP-PLUS -->
				<text class="copy" @click="onCopy(bankinfo.b_no)">复制</text>
				<!--  #endif -->
				<!--  #ifdef  H5 -->
				<text class="copy" v-clipboard:copy="bankinfo.b_no" v-clipboard:success="onCopyByH5">复制</text>
				<!--  #endif -->
			</view>
			<view class="item">
				<view>
					<text class="title">分行</text>
					<text>{{bankinfo.address}}</text>
				</view>
				<!--  #ifdef  APP-PLUS -->
				<text class="copy" @click="onCopy(bankinfo.address)">复制</text>
				<!--  #endif -->
				<!--  #ifdef  H5 -->
				<text class="copy" v-clipboard:copy="bankinfo.address" v-clipboard:success="onCopyByH5">复制</text>
				<!--  #endif -->
			</view>
		</view>
		<view class="title">收款人信息</view>
		<view class="tip2">
			转账完成后，请务必先提交转账截图再点击提交按钮！
		</view>
		<view class="imgwrap">
			<view class="top">
				<text>上传转账截图</text>
				<text>{{img?1:0}}/1</text>
			</view>
			<view  v-if="!img">
				<image @click="handleChangeHead" :src="upbtnurl" class="img"></image>				
			</view>
			<view class="imgbox" v-else>
				<image :src="interfaceurl+img" class="img"></image>
				<image src="../../static/del-icon.png" class="del" @click="delImg"></image>
			</view>
		</view>
		<view class="btn" @click="handleComfirm">提交</view>
	</view>
</template>

<script>
	import fetch from '@/common/fetch.js';
	export default {
		data() {
			return {
				amount:'0',
				//
				rechargeInfo:{},
				upbtnurl:'../../static/recharge-up-icon_03.png',
				img:'',
				bankinfo:{}
			}
		},
		onLoad(option){
			this.amount = option.money
			this.getBankInfo()
			this.getAmount()
		},
		computed:{
			interfaceurl(){
				let url = fetch.interfaceUrl()
				return url
			}
		},
		methods:{
			onCopyByH5() {
				uni.showToast({ title: '复制成功！', icon: 'none' });
			},
			onCopy(str){
				uni.setClipboardData({
					data: str,
					success: function() {
						uni.showToast({ title: '复制成功！', icon: 'none' });
					}
				});
			},
			//获取单纯显示的金额，后面增加随机小数点
			getAmount(){
				fetch.request('/index/Finance/createRandRecharge',{amount:this.amount},'GET').then(res=>{
					if (res.code === '0' || res.code === 0) {
						this.rechargeInfo = res.data
					}else{
						fetch.toast(res.msg)
						setTimeout(function(){
							uni.navigateTo({
								url:'/pages/recharge/index'
							})
						},1000)
					}
					
				})
			},
			getBankInfo(){
				fetch.request('/index/mobile/adminbank','','GET').then(res=>{
					this.bankinfo = res.data
				})
			},
			handleComfirm(){
				let postdata = {
					id:this.rechargeInfo.id,
					img:this.img
				}
				fetch.request('/index/Finance/updateRecharge',postdata,'POST').then(res=>{
					fetch.toast('提交成功，等待审核')
					setTimeout(function(){
						uni.navigateTo({
							url:'/pages/personal/subpage/accountDetail/ye'
						})
					},1000)
				})
			},
			//选择头像
			handleChangeHead(){
				let that = this
				uni.showLoading({
				  mask: true,
				  title: '请稍候...'
				})
				uni.chooseImage({
					count:1,
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        uni.uploadFile({
				            url: fetch.interfaceUrl()+'/index/index/doImgUpload',
				            filePath: tempFilePaths[0],
				            name: 'file',
				            success: (uploadFileRes) => {
				                let upurl = JSON.parse(uploadFileRes.data).data;																
								that.img = upurl	
								uni.hideLoading()
				            }
				        });
				    }
				});
			},
			delImg(){
				this.img = ''
			}
		}
	}
</script>

<style lang="less" scoped>
	page,.recharge{
		width: 100%;
		min-height: 100%;
	}
	.recharge{
		padding: 20rpx;
		box-sizing: border-box;
	}
	.tip,.tip2,.imgwrap{
		background: #fff;
		padding: 20rpx;
		.money{
			color: #ce473c;
		}
	}
	.title{
		color: #aaa;
		margin: 20rpx 0;
	}
	.tip2{
		color: #ce473c;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}
	.imgwrap{
		border-radius: 10rpx;
		.top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			text:first-child{
				color: #aaa;
			}
		}
		.img{
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
		}
	}
	.btn{
		width: 710rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		background: #F53D46;
		border-radius: 80rpx;
		margin: 40rpx 0;
		font-size: 14px;
	}
	.imgbox{
		display: inline-block;
		position: relative;
		.img{
			border: solid 1rpx #f4f4f4;
		}
		.del{
			position: absolute;
			top: -20rpx;
			right: -20rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
	.bank{
		background: #fff;
		border-radius: 10rpx;
		padding: 0 20rpx;
		margin-top: 20rpx;
		.item{
			height: 100rpx;
			border-bottom: solid 1rpx #f4f4f4;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&:last-child{
				border-bottom: none;
			}
			.title{
				    width: 70px;
				    display: inline-block;
				    color: #8798a3;
			}
			.copy{
				color: #F53D46;
			}
		}
	}
</style>
